<template>
	<view class="content">
		<view class="item">
			<view>
				选择项目
				<button size="mini" type="primary" class="floatright" v-if="formData.project_id" @click.stop="showbottommsg">详情</button>
			</view>
			<view>
				<span @click.stop="checkProjects">{{project_name||'请选择'}}</span>

			</view>
		</view>

		<view class="item">
			<view>选择团队成员:</view>
			<view>
				<span @click.stop="checkStaffs">{{staff_names||'请选择'}}</span>
			</view>
		</view>

		<view class="item">
			<view>计划结束时间:
				<view class="attention">请与主管确认该时间</view>
			</view>
			<view>
				<picker mode="date" @change="bindTimeChange">
					{{formData.end_time ||'请选择'}}
				</picker>
			</view>
		</view>

		<view class="bottom">
			<button size="mini" type="primary" class="bottombtn" @click.stop="saveClick">开启实施</button>
		</view>
		<check-project ref="project" @ok="({id,name})=>{formData.project_id=id;project_name=name;}"></check-project>
		<check-staffs ref="staffs" @ok="staffokclick"></check-staffs>
		<view class="pagebottombg" :class="{showbottom}" @click.stop="showbottom=false;currshow=false;">
			<view class="pagebottom" @click.stop :class="{currshow}">
				<view title="项目类型" class="item">
					{{curr.projectType?.name}}
				</view>
				<view title="项目归属" class="item">
					{{curr.ownerShip}}
				</view>
				<view title="客户名称" class="item line">
					{{curr.customerName}}
				</view>
				<view title="联系人" class="item">
					{{curr.linker}}
				</view>
				<view title="联系电话" class="item">
					{{curr.phone}}
				</view>
				<view title="项目名称" class="item line">
					{{curr.name}}
				</view>
				<view title="地址" class="item">
					{{curr.address}}
				</view>
				<view title="所属销售" class="item">
					{{curr.salespersonName}}
				</view>
				<view title="合同情况" class="item">
					{{curr.contractState}}
				</view>
				<view title="审批情况" class="item">
					{{curr.approveState}}
				</view>
				<view title="实施内容" class="item line" v-text="curr.description"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import { toast } from '../../utils/common';
	import project_api from '@/api/project.js';
	import { checkstaffs, add as addmsg } from '@/api/project_staff.js';
	export default {
		name: 'indexindex',
		data() {
			return {
				project_name: '',
				staff_names: '',
				formData: {
					project_id: '',
					staff_ids: [],
					end_time: ''
				},
				showbottom: false,
				curr:{},
				currshow:false
			}
		},
		onLoad() {

		},
		methods: {
			bindTimeChange({ detail: { value } }) {
				this.formData.end_time = value;
			},
			checkProjects() {
				this.$refs.project.show();
			},
			checkStaffs() {
				this.$refs.staffs.show(this.formData.staff_ids);
			},
			staffokclick({ ids, names } = {}) {
				this.formData.staff_ids = ids;
				this.staff_names = names.join('、');
			},
			saveClick() {
				let ids = this.formData.staff_ids;
				if (!ids || ids.length == 0) return toast('请选择团队成员');
				/**
				 * 提交请求
				 */
				const func = () => {
					addmsg(this.formData).then(msg => {
						toast(msg);
						Object.assign(this.formData, { project_id: '', staff_ids: [], end_time: '' });
						this.project_name = '';
						this.staff_names = '';

					}).catch(msg => {
						toast(msg);
					})
				}
				checkstaffs(ids.join(','), this.formData.end_time).then(func).catch((msg) => toast(msg));
			},
			showbottommsg() {
				this.showbottom=true;
				project_api.showdetail(this.formData.project_id).then(res => {
					this.currshow=true;
					this.curr=res;
				}).catch(toast);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 80vw;
		position: fixed;
		left: 10vw;

		.item {
			display: flex;
			flex-direction: column;
			height: 20vh;
			line-height: 10vh;
			&>:nth-child(1) {
				color: #666;
				font-weight: bold;
				font-size: 16px;
				position: relative;

				.attention {
					position: absolute;
					top: 20px;
					right: -10px;
					color: red;
					font-size: 12px;
					line-height: 20px;
					text-indent: 0;
					padding: 0 10px;
					border-radius: 5px;
				}

				.floatright {
					position: absolute;
					top: calc(5vh - 15px);
					right: 0px;
					text-indent: 0;
				}
			}

			&>:nth-child(2) {
				position: relative;
				text-indent: 20px;
				margin-left: 20px;
				background-color: #f0f0f0;
				border-radius: 5px;
				height: 10vh;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.bottom {
			height: 15vh;
			width: 80vw;
			display: grid;
			place-items: center center;
		}
	}

	.pagebottombg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: #00000020;
		display: none;
		&.showbottom {
			display: block;
		}

		.pagebottom {
			position: fixed;
			left: 0;
			z-index: 10000;
			background-color: white;
			height:0vh;
			width: 100vw;
			bottom: 0;
			border-top: 1px solid #ccc;
			overflow: hidden;
			transition-duration: 500ms;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: repeat(10,1fr);
			box-shadow: 0 -2px 6px 2px #00000010;
			&>.item {
				height: 40px;
				line-height: 40px;
				display:flex;
				flex-direction: row;
				flex:1;
				font-size:12px;
				gap:10px;
				border-bottom: 1px solid #eee;
				&::before{
					content:attr(title)'：';
					display:block;
					width:70px;
					text-align:right;
					font-weight: bold;
					color:#999;
					background-color:#00000010;
				}
				&.line{
					grid-column: 1/3;
				}
			}
			&.currshow {
				height: 60vh;
			}
		}

		
	}
</style>